<template>
  <div class="switch-container" @click="toggleSwitch">
    <div class="switch" :class="{ 'switch-on': isOn }">
      <div class="switch-thumb"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "UISwitchComponent",
  props: {
    modelValue: Boolean, // 绑定 v-model
  },
  computed: {
    isOn: {
      get() {
        return this.modelValue;
      },
      set(value) {
        this.$emit("update:modelValue", value);
      },
    },
  },
  methods: {
    toggleSwitch() {
      this.isOn = !this.isOn;
    },
  },
};
</script>

<style scoped>
/* 容器 */
.switch-container {
  display: inline-block;
  cursor: pointer;
  outline: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* 开关背景 */
.switch {
  width: 50px;
  height: 28px;
  border-radius: 14px;
  background: #ccc;
  position: relative;
  transition: background 0.3s;
}

/* 开关开启状态 */
.switch-on {
  background: #34c759; /* iOS 绿色 */
}

/* 滑块 */
.switch-thumb {
  width: 24px;
  height: 24px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: all 0.3s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* 开启状态下的滑块位置 */
.switch-on .switch-thumb {
  left: 24px;
}
</style>
